<template>
  <section :class="{'active': isActive}">
    <div class="container" :class="{'active': isActive}">
      <div class="user signinBx">
        <div class="imgBx"><img src="../../public/static/018.jpg"></div>
        <div class="formBx">
          <form>
            <h2>登录</h2>
            <input type="text" placeholder="用户名" v-model="form.username">
            <input type="password" placeholder="密码" v-model="form.password">
            <input type="button" value="登录" @click="LoginButton()">
            <p class="signup">没有账户？<a href="#" @click="this.isActive = !this.isActive;">账户注册</a></p>
          </form>
        </div>
      </div>

      <div class="user signupBx">
        <div class="formBx">
          <form>
            <h2>创建账户</h2>
            <input type="text" placeholder="姓氏" v-model="register.firstName">
            <input type="text" placeholder="名字" v-model="register.lastName">
            <input type="text" placeholder="用户名" v-model="register.username">
            <input type="password" placeholder="密码" v-model="register.password">
            <!--            <input type="password" placeholder="确认密码" v-model="register.password">-->
            <input type="text" placeholder="联系电话" v-model="register.phone">
            <input type="text" placeholder="电子邮箱" v-model="register.email">
            <input type="button" value="注册" @click="RegisterButton()">
            <p class="signup">拥有账户?<a href="#" @click="this.isActive = !this.isActive;">登录</a>
            </p>
          </form>
        </div>
        <div class="imgBx"><img src="../../public/static/026.jpg"></div>
      </div>
    </div>
  </section>
</template>

<script>
import { reactive, ref } from 'vue';
import { useRouter } from 'vue-router';
import { post } from '@/api/https';
import { ElMessage } from 'element-plus';

export default {
  name: 'LoginView',
  setup() {
    const router = useRouter();
    const form = reactive({
      username: '',
      password: '',
    });
    const register = reactive({
      firstName: '',
      lastName: '',
      username: '',
      password: '',
      phone: '',
      email: ''
    });
    let isActive = ref(false);

    async function RegisterButton() {
      const {
        data,
        code
      } = await post('/user/create/', register);
      if (code == 200){
        ElMessage({
          message: '注册成功',
          type: 'success',
          grouping: true,
        });
        this.isActive = !this.isActive;
      }else{
        ElMessage({
          message: data.message,
          type: 'error',
          grouping: true,
        });
      }
    }

    async function LoginButton() {
      const {
        data,
        code
      } = await post('/user/login/', form);
      if (code == 200) {
        localStorage.setItem('user', form.username);
        localStorage.setItem('token', data.token);
        await router.push({ path: '/index' }); //跳转页面到主页
      } else {
        ElMessage({
          message: data.message,
          type: 'error',
          grouping: true,
        });
      }
    }

    return {
      isActive,
      form,
      register,
      LoginButton,
      RegisterButton
    };
  },
};
</script>
<style scoped src="../../public/css/login.css"></style>
